<template>
  <div class="min-h-screen bg-slate-100 text-slate-900">
    <header class="bg-white/80 backdrop-blur border-b border-slate-200">
      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
                  <NuxtLink to="/" class="text-lg font-semibold text-slate-700 hover:opacity-80 no-underline">
          ← 返回首页
        </NuxtLink>
        <div class="flex items-center space-x-4">
          <!-- 未登录：显示登录入口 -->
          <NuxtLink 
            v-if="!isLoggedIn"
            :to="loginLink"
            class="text-slate-700 hover:text-slate-900 text-sm font-medium transition-colors duration-200"
          >
            登录
          </NuxtLink>

          <!-- 已登录：头像下拉 -->
          <el-dropdown v-else trigger="click" class="user-dropdown">
            <div class="flex items-center cursor-pointer px-3 py-2 rounded-lg hover:bg-slate-100 transition-all duration-300">
              <el-avatar :size="32" :src="currentUser.avatar" class="mr-2">
                <el-icon><User /></el-icon>
              </el-avatar>
                              <span class="text-sm font-medium text-slate-700">{{ currentUser.username }}</span>
              <el-icon class="ml-1 text-slate-500"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">
                  <el-icon class="mr-2"><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item @click="goToAdmin">
                  <el-icon class="mr-2"><Setting /></el-icon>
                  后台管理
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">
                  <el-icon class="mr-2"><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-8">
      <slot />
    </main>
  </div>
  
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, ArrowDown, Setting, SwitchButton } from '@element-plus/icons-vue'
import { useAuth } from '~/composables/useAuth'

const route = useRoute()
const router = useRouter()
const { currentUser, isLoggedIn, logout } = useAuth()

// 登录链接（带重定向保持在当前搜索页）
const loginLink = computed(() => `/admin/login?redirect=${encodeURIComponent(route.fullPath)}`)

const handleLogout = async () => {
  await logout()
  ElMessage({ message: '已退出登录', type: 'info', duration: 1000 })
  // 留在当前页，刷新用户态
  router.replace(route.fullPath)
}

const goToProfile = () => {
  router.push('/profile')
}

const goToAdmin = () => {
  router.push('/admin/dashboard')
}
</script>

<style scoped>
</style>


